loginDialog: Update user list style

Rather than changing the text color to indicate hover and an underline
to mark the focused item, use the same semi-transparent white background
as in the overview.

https://bugzilla.gnome.org/show_bug.cgi?id=660913

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 189b417d03a54cbdb973da5067c0234748042138..f567ab1f104d44459f5a81fca16c9dcd5c2c9f29 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2047,10 +2047,13 @@ StButton.popup-menu-item:insensitive {
 
 .login-dialog-user-list {
     spacing: 12px;
+    padding: .2em;
 }
 
 .login-dialog-user-list-item {
     color: #666666;
+    border-radius: 10px;
+    padding: .2em;
 }
 
 .login-dialog-user-list-item:ltr {
@@ -2064,18 +2067,22 @@ StButton.popup-menu-item:insensitive {
 .login-dialog-user-list-item .login-dialog-user-list-item-name {
     font-size: 20pt;
     padding-left: 1em;
-    color: #666666;
-}
-
-.login-dialog-user-list-item:hover .login-dialog-user-list-item-name {
-    color: white;
 }
 
+.login-dialog-user-list-item:hover .login-dialog-user-list-item-name,
 .login-dialog-user-list-item:focus .login-dialog-user-list-item-name {
     color: white;
     text-shadow: black 0px 2px 2px;
 }
 
+.login-dialog-user-list-item:hover {
+    background-color: rgba(255,255,255,0.1);
+}
+
+.login-dialog-user-list-item:focus {
+    background-color: rgba(255,255,255,0.33);
+}
+
 .login-dialog-user-list-item-vertical-layout {
     spacing: 2px;
 }

diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index ac7300fcf30fd5f1968b367b57a91aed71d498e6..8359fdaba854200e5225190b5e14395ff38f8b3b 100644 (file)
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -180,6 +180,13 @@ const UserListItem = new Lang.Class({
             this._setIconFromName('avatar-default', 'login-dialog-user-list-item-icon');
     },
 
+    syncStyleClasses: function() {
+        if (this.actor.can_focus && global.stage.get_key_focus() == this.actor)
+            this.actor.add_style_pseudo_class('focus');
+        else
+            this.actor.remove_style_pseudo_class('focus');
+    },
+
     _onClicked: function() {
         this.emit('activate');
     },
@@ -299,8 +306,10 @@ const UserList = new Lang.Class({
         for (let userName in this._items) {
             let item = this._items[userName];
 
+            item.actor.set_hover(false);
+            item.actor.reactive = false;
             item.actor.can_focus = false;
-            item._focusBin.scale_x = 0.;
+            item.syncStyleClasses();
             if (item != exception)
                 tasks.push(function() {
                     return GdmUtil.fadeOutActor(item.actor);
@@ -353,7 +362,10 @@ const UserList = new Lang.Class({
 
         for (let userName in this._items) {
             let item = this._items[userName];
+            item.actor.sync_hover();
+            item.actor.reactive = true;
             item.actor.can_focus = true;
+            item.syncStyleClasses();
             tasks.push(function() {
                 return this._showItem(item);
             });
@@ -443,7 +455,6 @@ const UserList = new Lang.Class({
                            Lang.bind(this,
                                      function() {
                                          this.scrollToItem(item);
-                                         item.showFocusAnimation(0);
                                      }));
 
         this._moveFocusToItems();
@@ -1049,7 +1060,6 @@ const LoginDialog = new Lang.Class({
                          // item.
                          if (!this.is_loaded) {
                              this._userList.jumpToItem(this._timedLoginItem);
-                             this._timedLoginItem.showFocusAnimation(0);
                          }
                      },